<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" id="viewport" content="width=device-width"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <style rel="stylesheet" type="text/css">
          *{margin:0;padding:0;}

          body {
             width: 100vw;
             overflow: hidden;
          }
          
          #WorldWrap {
              width: 100vw;
              background-color: #eee;
          }
          
          #Settings {
              position: relative;
              width: 100%;
              
              background-color: #eee;
              display: flex;    
              display: -webkit-flex;
              flex-direction: column;
              -webkit-flex-direction: column;
          }
          
          #Stats {
              position:relative;
              width: 100%;
              
              background-color: #eee;
          }
          
          /*World style after this point*/
          
          
          #World {
              position: relative;
              height: 600px;
              width: 800px;
              overflow: hidden;
              
              background-color: white;
              margin: auto;
          }
          
          .blue, .deadBlue{
              position: absolute;
              top:0;
              left: 0;
              height: 30px;
              width: 30px;
              border-radius: 50%;
              background-color: cornflowerblue;
              border-bottom-left-radius: 20%; 
              border-bottom-right-radius: 20%;
              border: 2px solid black;
          }
          
          .deadBlue{
              background-color: LimeGreen;
          }
          
          .green{
              position: absolute;
              top:0;
              left: 0;
              height: 30px;
              width: 30px;
              border-radius: 50%;
              background-color: LimeGreen;
              border: 2px solid black;
          }
          
          /*world style end*/
          
          #GenerationCounter {
              float: left;
              width: 50%;
              
              background-color: #ccc;
              text-align: center;
              font-size: 50px;
              font-family: Arial,sans-serif;
              color: white;
          }
          
          #EntitiesStates {
              position: relative;
              height: 100px;
              width: 100%;
              display: flex;
              display: -webkit-flex;
              display: -ms-flex;
              justify-content: space-between;
          }
          
          #EntitiesStates > div {
              flex: 1;
              -webkit-flex: 1;
              -ms-flex: 1;
              
              background-color: #ddd;
              margin: 0px 2px;
              text-align: center;
              font-size: 40px;
              font-family: sans-serif;
              position: relative;
          }
          
          #EntitiesStates > div > p {
              position: absolute;
              top:50%;
              left:50%;
              -ms-transform: translate(-50%,-50%);
              -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);  
          }
          
          #TimeLeft {
              float: right;
              width: 50%;
              
              background-color: #ccc;
              text-align: center;
              font-size: 50px;
              font-family: Arial,sans-serif;   
              color: white;
          }
          
          #Settings > div {
              position: relative;
              margin: 2px 0px;
              flex: 1;
              -webkit-flex: 1;
              height: 100px;
              
              font-family: sans-serif;
              font-size: 50px;
              text-align: center;
              text-transform: uppercase;
              
              background-color: #ddd;
          }
          
          #Settings > div:active {
              background-color: #ccc
          }
          
          #Settings > div > p {
              position: absolute;
              top:50%;
              left:50%;
              -ms-transform: translate(-50%,-50%);
              -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);       
          }

        </style>
    </head>
    <body>       
        <div id="WorldWrap">
        	<div id="World"></div>
        </div>
        <div id="Stats">
            <div id="GenerationCounter">1</div>
            <div id="TimeLeft"></div>
            <div id="EntitiesStates"></div>
        </div>
        <div id="Settings">
            <div id="Speed" onclick=""><p></p></div>
            <div id="Restart">
                <p>Restart</p>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <script src="js/math.js"></script>
        <script src="js/world.js"></script>
    </body>
</html>